<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
  <title>淘票票</title>
 <link rel="shortcut icon" href="../img/icon.ico">
	 <link type="text/css" rel="stylesheet" href="../css/orderStyle.css" />
	 


</head>

<body style="overflow-y:scroll;overflow-x:auto;">
	<div id="head">
		<div id="k1">
			<img id="mianIcon" src="../img/mian_icon.png">
			<p id="cityName" >杭州</p>
			<div id="menu">
			<a id="aMain">首页</a>
			<a id="aFilm">影片</a>
			<a id="aCinema">影院</a>
			</div>
		</div>
		<div id="k2">
			<table> <tr><td><a id="buyByPhone" ><img src="../img/buyByPhone.png">手机购买</a></td>&nbsp;<td><a id="customerService" ><img src="../img/customerService.png">咨询客服</a></td></tr></table>
			<input id="timeId"  type="text" th:value="${time_id}" style="display: none">
		</div>
	</div>
	<hr>
	<div id="box">
		<table id="progressBar">
			<tr>
				<td class="over"><img src="../img/over.png"/>1.选择影片，场次</td>
				<td id="pro2"><img src="../img/over.png" style="display: none">2.选座，填手机号</td>
				<td id="pro3"><img src="../img/over.png" style="display: none">3.确认订单，支付</td>
				<td id="pro4"><img src="../img/over.png" style="display: none">4.支付成功，影院取票观影</td>
			</tr>
		</table>
		<div id="one" class="container">
			<div id="left1">
				<img id="screen" src="../img/screen.png"/>
				<p th:text="${cinema_name}+${time_info.Hall_name}+' 银幕'"> </p>
				<ol id="seatList">
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						
					</li>
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						
					</li>		
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						
					</li>	
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
					</li>	
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
					</li>	
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
					</li>	
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
					</li>
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
					</li>
					<li>
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
						<img src="../img/seat.png" />
					</li>					
				</ol>
				<div id="sample">
					<ul>
						<li><img src="../img/seat.png"/>可选座位</li>
						<li><img src="../img/seat_selected.png"/>已选座位</li>
						<li><img src="../img/seat_ordered.png"/>不可选座位</li>
					</ul>
					<p id="seatCount">本影厅共有座位142个，当前已售0个</p>
				</div>
			</div>
			<div id="right1">
				<img th:src="${film_info.Url}" />
				<span class="filmInfo"> <h3 th:text="${film_info.Film_name}"> </h3><p  th:text="'版本：'+${time_info.Language_version}"> </p><p th:text="'片长：'+${film_info.Film_lengh}+'分钟 '"> </p></span>
			<table> 
				<tr>
					<td><p class="grayText">影院：</p><h4 th:text="${cinema_name}"></h4></td>
				</tr>
				<tr>
					<td><p class="grayText">影厅：</p><h4 th:text="${time_info.Hall_name}"></h4></td>
				</tr>
				<tr>
					<td><p class="grayText">场次：</p><h4 id="time1" th:text="${time_info.Film_date}+'|'+${time_info.Film_time}"></h4></td>
				</tr>
				<tr>
					<td id="SeatInfo"><p class="grayText">座位：</p><br>
					<div id="seatPos"></div>
					<span id="numOrdered">已选择<h4>0</h4>个座位，再次点击座位可以取消</span><br><br>
						<!--<div class="seatItem">6排16座</div>-->
					</td>
				</tr>
			</table>
				<hr>
				<div class="price" ><p id="priceCount" class="grayText" th:value="${time_info.Film_price}" th:text="'原价：'+${time_info.Film_price}+'x 0'"></p></div>
				<div class="price"><p  class="grayText">总计：</p><p id="counter">￥0.00</p></div>
				<hr>
				<br>
				<p>&nbsp;&nbsp;&nbsp;接收电子码的手机号(11位)</p>
				<input id="inputPhone" type="text" th:value="${phone_number}" /><br>
				<div id="btnConfirm"><p>确认信息，下单</p></div>
			</div>
			<div id="bottom1">
				<br>
				<p>
				<strong>特别提示：</strong><br>
				
    			1、下单前请仔细核对影片、影院、场次、手机号等信息。<br>
    			2、下单后请于15分钟内完成支付，超时系统将不保留座位。<br>
    			3、每笔订单最多可以选择4个座位，请选择连续的座位。<br>
    			4、电影票售出后暂不支持退换 。<br>
				</p>
			</div>
		</div>
		<div id="two" class="container" style="display: none">
			<div id="hintText2"><p id="orderId" class="grayText" th:text="'订单号：'+${user_id}+${time_id}"></p><p style="float: right" class="grayText">选座由中影国际提供，客服热线：0571-88157838</p></div>
                  <table id="DataTable"  width="100%" cellspacing="0" cellpadding="0" >
       				 <thead class="table_head" >
       				 <tr>
            			<th width="30%">电影</th>
           			 	<th width="20%">场次</th>
            			<th width="15%">票数/座位</th>
            			<th width="15%">金额小计</th>
						<th width="20%">接受电子码的电话号码</th>
        			</tr>
        			</thead>
       				<tbody id="DataTableInput">
        			<tr>
            			<td>	
							<img th:src="${film_info.Url}" />
							<span class="filmInfo"> <h3 th:text="${film_info.Film_name}"></h3><p th:text="'版本：'+${time_info.Language_version}"></p><p  th:text="'片长：'+${film_info.Film_lengh}+'分钟 '"></p></span>
						</td>
           				<td>
							<p th:text="${cinema_name}+'|'+${time_info.Hall_name}"></p>
							<p th:text="${time_info.Film_date}+'|'+${time_info.Film_time}"></p>
						</td> 
						<td id="SeatInfo2">
							<p>1张</p>
							<div class="seatItem2">6排16座</div>
						</td>
						<td id="xiaoJi">￥40.00</td>
						<td th:text="${phone_number}"></td>
						
        			</tr>
        							
        			</tbody>
   					 </table>
			<div id="sum2"><p>实付款：</p><h4 id="Sum">￥40.00</h4>
				<form style="width: 700px" action="AddOrder" method="post" target="_blank"><!--action="check_login" method="post" target="_blank"-->
					<input name="Order_number" id="Order_number" style="display: none">
					<input name="Uesr_id" style="display: none" th:value="${user_id}">
					<input name="Time_id"  id="time_id" style="display: none" th:value="${time_id}">
					<input name="Actual_money" id="Actual_money" style="display: none">
					<input name="Film_times_id" style="display: none" th:value="${time_id}">
					<input name="Order_time" id="Order_time" style="display: none">
					<input type="submit" id="orderConfirm" value="确认订单，立即支付"></input>
				</form>

			</div>
			
		</div>
		<div id="three" class="container" style="display: none">
			<table>
				<tr><td>付款成功！</td></tr>
				<tr><td>以下是取票二维码（请及时保存或者在手机上查看）</td></tr>
				<tr><td><img src="../img/erWeiMa.png"/></td></tr>
				<tr><td><p id="orderId3">订单号：20210605222312138</p></td></tr>
				<tr><td><p>订单生成时间：</p><p id="orderTime3">2021-06-05 22：25：00</p></td></tr>
				<tr><td><p>实际支付金额：</p><p id="paySum3">40.00</p></td></tr>
				<tr><td><div id="backMain">返回首页</div></td></tr>
			</table>
		</div>
		
	</div>
	<div id="bottom">
	<table id="tb1">
		<tr>
			
			<td>
				
				<img id="bottomIcon" src="../img/textIcon_white.png" ><br>
				<p class="botomText" align="center">如果您是消费者，<br>
				请拨打0571-88157838 <br>
				如果您是影院/合作商家，<br>
				请拨打400-825-9220<br>
				(服务时间:9:00-21:00)</p>
			</td>
			<td>
				
				<b class="botomText2">选座购票流程</b><br>
				<ul >
					<li class="botomText"><a>•选择影片和场次</a></li>
					<li class="botomText"><a>•选择中意的座位</a></li>
					<li class="botomText"><a>•支付并收到取票短信</a></li>
				</ul>
			</td>
			<td>
				<b class="botomText2">取票流程</b><br>
				<ul >
					<li class="botomText"><a>•收到取票短信</a></li>
					<li class="botomText"><a>•影院自助取票</a></li>
					<li class="botomText"><a>•短信重发方式</a></li>
				</ul>
			</td>
			<td>
				<b class="botomText2">常见问题</b><br>
				<ul >
					<li class="botomText"><a>•是否支持退换票</a></li>
					<li class="botomText"><a>•填错手机号怎么办</a></li>
					<li class="botomText"><a>•更多问题>></a></li>
				</ul>
			</td>
			
			<td>
				<div class="blank"></div>
				<b class="botomText2">协议规范</b><br>
				<ul >
					<li class="botomText"><a>•用户服务协议</a></li>
					<li class="botomText"><a>•食品管理规范</a></li>
					<li class="botomText"><a>•隐私权政策</a></li>
					<li class="botomText"><a>•退改签服务费规范</a></li>
				</ul>
			</td>
			<td>
				<img src="../img/QR_code.png">
			</td>
		</tr>
		</table>
		<hr id="bottomLine"> 
		<div id="youLian"><p class="botomText"> <a>阿里巴巴集团</a> | <a>阿里巴巴国际站</a> | <a>阿里巴巴中国站</a> | <a>全球速卖通</a> | <a>淘宝网</a> | <a>天猫</a> | <a>聚划算</a> | <a>一淘</a> | <a>阿里妈妈</a> | <a>阿里云计算</a> | <a>云OS</a> | <a>万网</a> | <a>中国雅虎</a> | <a>支付宝</a> </p></div>
			<p style="display: table;margin-left: 260px" class="botomText"> 关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2017 Taopiaopiao.com 版权所有<br>
			增值电信业务经营许可证：沪B2-20170117 沪ICP备16050036号-1 营业执照<br>
			违法不良信息举报电话 0571-88157838<br>
			违法不良信息举报邮箱 taopiaopiao_tousu@list.alibaba-inc.com </p>
	</div>
	<img style="display: table;margin: 0 auto" src="../img/wangJing.png">
	<script src="../js/jquery-3.3.1/jquery-3.3.1.min.js"></script>
		<script src="../js/order.js"></script>
</body>
</html>
